<html>
  <head>
    <title>Animation 动画相关API</title>
  </head>
  <body>
    <script>
      /*
                二、animation

                            animation 模块可以用来在组件上执行动画。  
                            
                            JS-animation可以对组件执行一系列简单的变换（位置、大小、旋转角度、背景颜色、不透明度）

                            举个例子，如果有一个 image 组件，通过animation你可以对其进行进行移动、旋转、拉伸或收缩等操作。


                            eg:

                                    <template>
                                        <view class="box">
                                        <view ref="test" @click="move" class="box-item"></view>
                                        </view>
                                    </template>
                                    <script>
                                        const animation = uni.requireNativePlugin('animation')
                                        export default {
                                            methods: {
                                                move() {
                                                    var testEl = this.$refs.test;
                                                    animation.transition(testEl, {
                                                        styles: {
                                                            backgroundColor: '#007AFF',
                                                            transform: 'translate(100px, 80px)',
                                                            transformOrigin: 'center center'
                                                        },
                                                        duration: 800, //ms
                                                        timingFunction: 'ease',
                                                        delay: 0 //ms
                                                    },()=>{
                                                        uni.showToast({
                                                            title: 'finished',
                                                            icon:'none'
                                                        });
                                                    })
                                                }
                                            }
                                        }
                                    <//script>
                                    <style scoped>
                                        .box{
                                            width:750rpx;
                                            height:750rpx;
                                        }
                                        .box-item{
                                        width: 250rpx;
                                        height: 250rpx;
                                        background-color: #00aaff;
                                        }
                                    </style>   
            */

    </script>
  </body>
</html>